<template>
	<view class="container">
		<scroll-view class="scroll" scroll-y="true"  @scrolltolower="scrolltolower">
			<view class="wrap" v-for="(item,index) in moviesList" :key="index" @click="toDtails(item.id)">
					  <view class="left">
						  <image mode="aspectFill" :src="item.images.small"/>
					  </view>
					  <view class="right">
						  <view class="title">{{item.title}}<text class="scro">{{item.rating.average||"即将上映"}}</text></view>
						  <view>{{item.year}} </view>
						  <view>{{item.genres.join()}}</view>
					  </view>
			</view>
			<view v-if="isShow" style="text-align: center;font-size:16px;color:#808080">没有更多数据了</view>
		</scroll-view>
	</view>
</template>

<script>
	import {comingSoon,newMovies,top250} from "../../apis"
	export default {
		data() {
			return {
				testList: ['即将上映的电影', '豆瓣电影新片榜', '豆瓣电影Top250'],
				typeNum:-1,
				start:0,
				moviesList:[],
				isShow:false
			};
		},	
		onLoad(option){
			uni.showLoading({
				title:"加载中",
				mask:true
			})
			// 通过主页传递的参数分类标题与testList的标题相匹配拿到每一个标题对应的下标
			this.typeNum = this.testList.indexOf(option.title)
			// 通过下标对应到数据接口获取分类影片的数据
			this.getClassData(this.typeNum)({city:this.$store.state.city,count:10,start:0}).then(res=>{
				let [err,data]=res;
				this.moviesList=data.data.subjects;
				uni.hideLoading()
			})
		},
		methods:{
			// 监听滚动到底部时，显示加载框，获取下10条的数据
			scrolltolower(){
				uni.showLoading({
					title:"加载中",
					mask:true
				})
				this.start+=10;
				// 重新获取数据
				this.getClassData(this.typeNum)({
						city: this.$store.state.city,
						count: 10,
						start: this.start,
				}).then(res=>{
					let [err,data]=res
					let subjects=data.data.subjects
					if(subjects.length===0){
						this.isShow=true
					}
					Array.prototype.push.apply(this.moviesList,subjects)
					uni.hideLoading()
				})
			},
			// 获取三个接口的数据
			getClassData(state){
				let fnList=[comingSoon,newMovies,top250];
				return fnList[state]; 
			},
			// 带影片id跳转至详情页
			toDtails(id){
				uni.navigateTo({
					url:"../detail/detail?id=" + id
				})
			}
		}
	}
</script>

<style lang="scss">
.container{
	overflow:hidden;
	.scroll{
		height: 667*2upx;
	}
	.wrap{
		display: flex;
		border-bottom: 1px solid #C8C7CC;
		padding:20upx 30upx;
		.left{
			width: 168upx;
			height:208upx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.right{
			flex: 1;
			margin-left:20upx;
			.title{
				font-size:40upx;
				color:black;
			}
			view{
				font-size:30upx;
				color:#C0C0C0;
			}
			.scro{
				background:rgba(247, 76, 49,1);
				padding:2upx 6px;
				border-radius: 6px;
				color:#fff;
				float:right;
				font-size:25upx;
			}
		}
	}
}
</style>
